<template>
    <div class="table-template-edit">
        <el-table
            :data="tableData"
            class="pbb__table"
            header-cell-class-name="pbb__table-thead"
            cell-class-name="pbb__table-thead-cell"
            row-class-name="pbb__table-thead-row"
            border
            style="width: 100%">
            <el-table-column
                label="序号"
                align="center"
                type="index"
                width="60">
            </el-table-column>
            <template v-for="(item, index) in tableColumn">
                <template v-if="item.itemType === 1">
                    <el-table-column
                        :key="index"
                        align="center"
                        :label="item.name">
                        <template v-for="(it, i) in item.items">
                            <el-table-column
                                :key="i"
                                align="center"
                                :prop="it.name"
                                :label="it.name">
                                <template slot="header">
                                    <span class="control-item-name" :class="{'is_required': it.required}">{{it.name}}{{ it.unitKindName ? `(${it.unitKindName})` : "" }}</span>
                                </template>
<!--                                <template slot-scope="scope">-->
<!--                                    <fill-in-table-item :item.sync="it" :modelData.sync="scope.row[i]"></fill-in-table-item>-->
<!--                                </template>-->
                            </el-table-column>
                        </template>
                    </el-table-column>
                </template>
                <template v-else>
                    <el-table-column
                        :key="index"
                        :prop="item.name"
                        :label="item.name">
                        <template slot="header">
                            <span class="control-item-name" :class="{'is_required': item.required}">{{item.name}}{{ item.unitKindName ? `(${item.unitKindName})` : "" }}</span>
                        </template>
<!--                        <template slot-scope="scope">-->
<!--                            <fill-in-table-item :item.sync="item" :modelData.sync="scope.row[index]"></fill-in-table-item>-->
<!--                        </template>-->
                    </el-table-column>
                </template>
            </template>
<!--            <el-table-column-->
<!--                label="操作">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-button size="mini" type="text" @click="addData(scope.$index)">添加</el-button>-->
<!--                    <el-button v-if="scope.$index" size="mini" type="text" @click="deleteData(scope.row, scope.$index)">删除</el-button>-->
<!--                </template>-->
<!--            </el-table-column>-->
        </el-table>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import FillInTableItem from "@/views/module-manage/src/components/fill-in/table-item.vue";

@Component({
    components: {
        FillInTableItem
    }
})
export default class PreviewTable extends Vue {
    @Prop({ default: () => { return []; } }) private list!: any[]
    tableData: any[] = []
    tableColumn: any[] = []

    @Watch("list", { immediate: true, deep: true })
    changeList() {
        this.tableData = [];
        this.addData(-1);
        this.tableColumn = this.buildData(this.list);
    }

    buildData(list: any) {
        const tableColumn: any[] = [];
        list.forEach((item: any) => {
            if (item.itemType === 0) {
                tableColumn.push(...this.buildData(item.items));
            } else {
                tableColumn.push(item);
            }
        });
        return tableColumn;
    }

    addData(index: any) {
        const lineData: any[] = [];
        this.list.forEach((item: any, index: any) => {
            if (["1", "2", "3", "6", "7", "11", "12"].includes(item.valueKindId)) {
                lineData[index] = { ...item, itemValue: "" };
            } else if (item.valueKindId) {
                lineData[index] = { ...item, extData: [] };
            }
        });
        this.tableData.splice(index + 1, 0, lineData);
    }

    deleteData(row: any, index: any) {
        this.tableData.splice(index, 1);
    }
}
</script>

<style lang="scss" scoped>
    .table-template-edit {
        .control-item-name {
            @include textEllipsis();
            &.is_required:before {
                content: "*";
                color: #de2728;
                margin-right: 4px;
            }
        }
    }
</style>
